<style lang="scss" scoped>
@import "@/assets/css/variable";
.activityShow {
  width: 100%;
  padding-bottom: 6.2rem;
  background-color: var(--theme_color);
  min-height: 100%;
  font-size: 1.2rem;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  // overflow: hidden;
  $radiusSize: 100%;
  display: flex;
  flex-direction: column;
  padding: 4rem 1rem 0;
  .my_tuan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    z-index: 2;
    line-height: 3rem;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    // color: #fff;
    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
    }
  }
  .panle {
    padding: 0 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .imgs {
      width: 17rem;
      // height: 11rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .exothecium_one {
    display: flex;
    justify-content: space-around;
    width: 100%;
    // height: 15rem;
    // background-color: #ffdeea;
    .item-up {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .item {
        position: relative;
        width: 7rem;
        height: 7rem;
        border-radius: 100%;
        z-index: 5;
        background-color: var(--theme_color);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0 12px;
        .middle_img {
          background-color: aqua;
          width: 100%;
          height: 100%;
          border-radius: 100%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .imgs {
          position: absolute;
          z-index: 1;
          top: -10px;
          right: 0;
          width: 30px;
          img {
            width: 100%;
          }
        }
        .cd_imgs {
          position: absolute;
          z-index: 1;
          bottom: -6px;
          right: -7px;
          width: 100px;
          img {
            width: 100%;
          }
        }
      }
      .panle {
        display: flex;
        flex-direction: column;
        :nth-child(1) {
          font-weight: 550;
          color: #be1a21;
          font-size: 21px;
        }
        :nth-child(2) {
          padding: 15px 0;
          font-weight: 550;
          color: #be1a21;
          font-size: 23px;
        }
        :nth-child(3) {
          padding: 9px 22px;
          border-radius: 15px;
          color: #fff;
          font-size: 14px;
          background-color: var(--btn_color);
        }
      }
    }
  }
  .exothecium_two {
    width: 100%;
    padding: 30px 15px 10px;
    .panles_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      .item_left {
        display: flex;
        align-items: center;
        .indexs {
          font-size: 20px;
          color: #be1a21;
        }
        .imgs {
          width: 50px;
          height: 50px;
          border-radius: 100%;
          margin: 0 12px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .names {
          display: flex;
          flex-direction: column;
          color: #be1a21;
          font-size: 18px;
          :nth-child(1) {
            margin-bottom: 5px;
          }
        }
      }
      .item_right {
        padding: 9px 22px;
        border-radius: 15px;
        color: #fff;
        font-size: 14px;
        background-color: var(--btn_color);
      }
    }
  }
}
</style>
<template>
  <div class="activityShow" :style="{ '--theme_color': theme_color, '--btn_color': btn_color }">
    <div class="my_tuan" :style="{ backgroundColor: theme_color }">
      <van-icon
        class="icon"
        name="arrow-left"
        :color="'#666'"
        @click="iconClick"
      />
    </div>
    <div class="panle">
      <div class="imgs">
        <img src="../../../assets/img/huangg.png" alt="" />
      </div>
    </div>
    <div class="exothecium_one" v-if="voteList">
      <div class="item-up" v-for="(item, index) in voteListunshift" :key="item.id">
        <div class="item">
          <div class="middle_img">
            <img :src="item.url" alt="" />
          </div>
          <div class="imgs">
            <img v-if="index == 0" src="../../../assets/img/ypb.png" alt="" />
            <img v-if="index == 1" src="../../../assets/img/jpb.png" alt="" />
            <img v-if="index == 2" src="../../../assets/img/tpb.png" alt="" />
          </div>
          <div class="cd_imgs">
            <img v-if="index == 0" src="../../../assets/img/cd2.png" alt="" />
             <img v-if="index == 1" src="../../../assets/img/cd1.png" alt="" />
              <img v-if="index == 2" src="../../../assets/img/cd3.png" alt="" />
          </div>
        </div>

        <div class="panle">
          <span>{{ item.name }}</span>
          <span>{{ item.nums }}票</span>
          <span  @click="fansClick(item)">投票</span>
        </div>
      </div>
    </div>
    <div class="exothecium_two">
      <div class="panles_item" v-for="(item, index) in voteListshift" :key="item.id">
        <div class="item_left">
          <span class="indexs">{{index+4}}</span>
          <div class="imgs">
            <img :src="item.url" alt="" />
          </div>
          <div class="names">
            <span>{{item.name}}</span>
            <span>{{item.nums}}票</span>
          </div>
        </div>
        <div class="item_right" @click="fansClick(item)">投票</div>
      </div>
     
    </div>
  </div>
</template>

<script>
import {
  Button,
  Toast,
  Tab,
  Tabs,
  Icon,
  Dialog,
  Popup,
  Field,
  RadioGroup,
  Radio,
  Image as VanImage,
} from "vant";
import Nodata from "@/components/Nodata";

export default {
  name: "activityShow",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [VanImage.name]: VanImage,
    Nodata,
  },
  data() {
    return {
      openid: "",
      voteList: [],
      voteListunshift: [],
      voteListshift: [],
      openid: "",
      activityItem: {},
      theme_color: '',
      flagVote: true,
    };
  },
  created() {
    this.openid = localStorage.getItem("COPENID")
    console.log(this.$route.hash, 'theme_colortheme_color');
    this.theme_color = this.$route.hash
    this.btn_color = this.$store.state.btn_color
    this.activityItem = this.$store.state.activityItem
    if(!this.activityItem) {
      this.$router.go(-1);
    }
  },
  // computed: {
  //   getOpenId() {
  //     this.openid = this.$store.state.openid
  //     return this.openid
  //   }
  // },
  mounted() {
    this.getVotePage();
  },
  methods: {
    getVotePage() {
      let params = {
        activity_id: Number(this.$route.query.activity_id),
      };
      let data = [];
      this.$request.getVotePage(params).then((res) => {
        // console.log(res.data.data);
        data = res.data.data;
        let compare = function (obj1, obj2) {
          var val1 = parseFloat(obj1.nums);
          var val2 = parseFloat(obj2.nums);
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        };
        let list = data.sort(compare).reverse().splice(0, 10);
        this.voteList = list;
        let ar = new Array();
        for (var i = 3; i < this.voteList.length; i++) {
          ar.push(this.voteList[i]);
        }
        console.log(this.voteList);
        this.voteListunshift = [this.voteList[1], this.voteList[0], this.voteList[2]]
        this.voteListshift = ar
      });
    },
    fansClick(item) {
      console.log(item);
      if(this.activityItem.status == 2) {
        return this.$toast('活动已结束，无法投票')
      }
      if (this.flagVote) {
        this.flagVote = false;
        let params = {
        activity_id: Number(this.$route.query.activity_id),
        vote_id : item.id,
        fans_id: Number(this.$route.query.fans_id),
        openid: this.openid
      };
      this.$request.getVoteFansSave(params).then(res => {
        this.flagVote = true;
        if(res.ret == 200) {
          item.nums++
          this.$toast('投票成功')
        } else {
          // this.$toast('投票失败')
        }
      }) 
      }
      
    },
    // 退回
    iconClick() {
      this.$router.go(-1);
    },
  },
};
</script>